<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
?>
<style>	
#h-menu-g {
    top: 19px;
}

body.horizontal #header {
    height: 260px !important;
}
body.horizontal #header {
    height: 100px !important;
}
</style>
<ul id="h-menu-g">
<?php 
$n = count($this->_items);
$description  = "";
$url="";
foreach($this->_items as $k=> $item){ 
	$classli="";
	$classa = "";
	if(empty($this->subID)){
		$classa .="sel"; //first item selected
		$this->subID = $item->id;
	}else
	{
		if($this->subID == $item->id) {
			$classa ="sel";
			$description = $item->description;
			$this->document->setTitle($this->title . ' - '.$item->title.' - '. $this->sitename);
			$url = JURI::base().'index.php?option='.$this->option.'&Itemid='.$this->itemID.'&Subid='.$item->id;
		}
	}
	if($k+1==$n) $classli .=" last";	
?>
	<li class="<?php echo $classli;?>"><a href="<?php echo JURI::base();?>index.php?option=<?php echo $this->option;?>&Itemid=<?php echo $this->itemID;?>&Subid=<?php echo $item->id;?>" tppabs="<?php echo JURI::base();?>index.php?option=<?php echo $this->option;?>&Itemid=<?php echo $this->itemID;?>&Subid=<?php echo $item->id;?>" class="<?php echo $classa;?>"><?php echo $item->title;?></a></li>
<?php }?>
<!--
	<li><a href="PhongThuy/mau-sac-ngu-hanh.htm" tppabs="http://wonder.vn/PhongThuy/mau-sac-ngu-hanh">Màu sắc &amp; Ngũ Hành</a></li>
	<li class="last"><a href="PhongThuy/thuoc-lo-ban.htm" tppabs="http://wonder.vn/PhongThuy/thuoc-lo-ban">Thước Lỗ Ban</a></li>
-->
</ul><!-- #h-menu-g -->
    <div class="clear" style="height:30px;"></div>
            

		<div id="content">
		<?php if($this->subID==68){ ?>
			<form action="<?php echo $url;?>" id="frmpt" method="post">
				<label class="pt">Năm sinh:</label> <input type="text" name="born" value="" style="width:70px;margin-right:20px;" />
				<label class="pt">Hướng nhà:</label>
				<select name="huongnha" style="float:left;margin-right:20px;">
					<option value="-">-</option> 
					<option value="1">Nam</option> 
					<option value="2">Tây Nam</option> 
					<option value="3">Tây</option> 
					<option value="4">Tây Bắc</option>
					<option value="5">Bắc</option> 
					<option value="6">Đông Bắc</option> 
					<option value="7">Đông</option> 
					<option value="8">Đông Nam</option> 
				</select>
				<label class="pt">Giới tính:</label> 
				<select name="male" style="float:left;width:80px;">
					<option value="1" selected>Nam giới</option> 
					<option value="2" >Nữ giới</option>
				</select>
				<input type="submit" name="submitpt" value=" Gửi " style="float:left;margin:1px 20px 0 5px;">
				<label class="pt">Vui lòng nhập năm sinh, hướng nhà, giới tính để xem Phong Thủy &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
				<div class="clear"></div>
			</form>
			<?php }else if($this->subID==66) {?>
				
			<script type="application/javascript" src="templates/wonder/js/iscroll.js"></script>
<script type="text/javascript">
//Mỗi đoạn thước dài 1000mm
var rulerLength = 1000; //Số đo 1 đoạn thước (mm)
var trimStart = 0;  //Số đo đầu của thước (mm)
var trimEnd = 1000; //Số đo cuối của thước (mm)

var myScroll;

function pullRightAction () {
	if(trimStart > 0) {
		$('#scroller').width(function(i,width){
			return width + 10000;
		});
		trimStart -= rulerLength;
		var newLi = $('<li>').append($('<img/>', { src:'templates/wonder/images/thuoc522.php'}))
							 .append($('<img/>', { src:'templates/wonder/images/thuoc429.php'}))
							 .append($('<img/>', { src:'templates/wonder/images/thuoc388.php'}));
		$('#thelist').prepend(newLi);
		myScroll.refresh();
	}
}

function pullLeftAction () {
	if(trimEnd < 100000) {
		$('#scroller').width(function(i,width){
			return width + 10000;
		});
		var newLi = $('<li>').append($('<img/>', { src:'templates/wonder/images/thuoc522.png'}))
							 .append($('<img/>', { src:'templates/wonder/images/thuoc429.png'}))
							 .append($('<img/>', { src:'templates/wonder/images/thuoc388.png'}));
		trimEnd += rulerLength;
		$('#thelist').append(newLi);
		myScroll.refresh();
	}
}

function loaded() {
	Math.nativeRound = Math.round;
	Math.round = function(i, iDecimals) {
		if (!iDecimals)
			return Math.nativeRound(i);
		else
		   return Math.nativeRound(i * Math.pow(10, Math.abs(iDecimals))) / Math.pow(10, Math.abs(iDecimals));

	};

	myScroll = new iScroll('wrapper', {
		useTransition: true,
		leftOffset: $('#pullRight').outerWidth(true),
		onRefresh: function () {
			if ($('#pullRight').hasClass('loading')) {
				$('#pullRight').removeClass('loading');
				$('#pullRight .pullRightLabel').html('Kéo qua phải tải thêm...');
			} else if ($('#pullLeft').hasClass('loading')) {
				$('#pullLeft').removeClass('loading');
				$('#pullLeft .pullLeftLabel').html('Kéo qua trái tải thêm...');
			}
			$('#sodoLoban').html(Math.round((-this.x+48*10)/100,2) + ' cm');
		},
		onScrollMove: function () {

			$('#sodoLoban').html(Math.round((-this.x+48*10)/100,2) + ' cm');
		},
		onScrollEnd: function () {
			if (this.x > 5 && !$('#pullRight').hasClass('flip')) {
				$('#pullRight').addClass('flip');
				$('#pullRight .pullRightLabel').html('Thả ra để làm mới...');
			} else if (this.x < - ($('#scroller').width() - 1000) && !$('#pullRight').hasClass('flip')) {
				$('#pullLeft').addClass('flip');
				$('#pullLeft .pullLeftLabel').html('Thả ra để làm mới...');
			}
			//$('#abc').html('this.x='+this.x+' : out='+($('#scroller').width()-1000));
			if ($('#pullRight').hasClass('flip')) {
				$('#pullRight').removeClass('flip');
				$('#pullRight').addClass('loading');
				$('#pullRight .pullRightLabel').html('Đang tải...');
				pullRightAction();	// Execute custom function (ajax call?)
			} else if ($('#pullLeft').hasClass('flip')) {
				$('#pullLeft').removeClass('flip');
				$('#pullLeft').addClass('loading');
				$('#pullLeft .pullLeftLabel').html('Đang tải...');
				pullLeftAction();	// Execute custom function (ajax call?)
			}
			$('#sodoLoban').html(Math.round((-this.x+48*10)/100,2) + ' cm');
		}
	});

	setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>

<style type="text/css" media="all">
#wrapper {
	position:absolute; z-index:1;
	top:45px; bottom:0; left:0;
	width:100%;
	height:402px;
	background:#fff;
	overflow:auto;
}

#scroller {
	width:10100px;
	height:100%;
	float:left;
	padding:0;
}
#scroller li {
	display:block;
	float:left;
	width:10000px;
	height:100%;
}
#scroller li img{
	margin-top:28px;
}
#pullRight, #pullLeft {
	display:block;
	width:50px;
	float:left;
	height:100%;
}
#sodoLoban {
	position:absolute;
	z-index:2;
	top:50px;
	left:430px;
	text-align:center;
	width:100px;
	font-size:12px;
	font-weight:bold;
	/*border:1px solid red;*/
}
.titleLoban {

}
</style>		
			<?php }?>
			<?php 
			if(!empty($this->articles)) echo $this->articles[0]->introtext;
			else echo $description; 
			?>
						<div class="clear"></div>
		</div><!-- #content -->
			<div class="clear"></div>